<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BHM@RAMA8 V 0.0.3</title>

<script type="text/javascript" src="./dygraph-combined.js"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-40786629-1', 'bg4systems.com');
  ga('send', 'pageview');

	var MaxITEMGraph=60;
	var gBuffer="";


</script>
<script >
function getSOCK(){	
	var strDATA="";
	var Graph1="";
	var Graph2="";
	var Graph3="";
	var Graph4="";
	var Graph5="";
	var Graph6="";
	var ROW;
	
	var spROW="<br>";
	var spCH=',';

	var iROW,iCH;
	var rowMAX=-1;
	var chMAX=-1;

	//alert("start");

	if (window.XMLHttpRequest){
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}else{
		// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			//document.getElementById("dd").innerHTML=xmlhttp.responseText;
			//strDATA=strDATA + xmlhttp.responseText;
			strDATA=xmlhttp.responseText;
			//--------------------------------------
			if (strDATA=="NO")	{
				alert("No Data");
				return 0;
			}
			//-------  add buffer
			if (gBuffer.length>0){
				gBuffer+=spROW;
			}			
			gBuffer+=strDATA;
			//alert("Q Add");
			//------------------------------------------
			//document.write(gBuffer);

			//alert("is DATA");
			if (gBuffer.length >0) {			
				//alert(strDATA);
				ROW = gBuffer.split(spROW); //split row
				//  ----FCFS Queue -------
				if(ROW.length>MaxITEMGraph){
					//alert("Q active");
					//----- remove Frist Come ----
					strDATA="";
					for(iROW=1;iROW<=ROW.length-1;iROW++){
						if( iROW > 1){
							strDATA +=spROW;
						}//for(
						strDATA+=ROW[iROW];
					}
					gBuffer = strDATA; // save Buffer
					//document.write(gBuffer);

					//ROW="";
					ROW = gBuffer.split(spROW); //split row
				}//if(ROW.length>MaxITEMGraph){
				
				//------------------------------
				strDATA=ROW[0].split(spCH); //get channel
				//alert(strDATA.length); // ch = col.length - 2(index,datetime) 
				
				rowMAX = ROW.length; 
				chMAX = strDATA.length-3; // ลบ CMD,Length,DateTime
			
			//	rowMAX = 3; // ลบ header 1 row 
			//	chMAX =10; // ลบ CMD,Length,DateTime

				//alert("row:"+String(rowMAX) + " col:" + String(chMAX));
				if(rowMAX<=0){
					alert("!ไม่พบข้อมูล ROW");
					return 0;
				}
				if(chMAX<=0){
					alert("!ไม่พบข้อมูล CH");
					return 0;
				}

				//alert("Start add data");
				//------- Header --------------------------------
				Graph1 ="Date,CH1,CH2";
				Graph2 ="Date,CH3,CH4,CH5,CH6";
				Graph3 ="Date,CH7,CH8,CH9,CH10,CH11,CH12";
				Graph4 ="Date,CH3,CH13,CH14";
				Graph5 ="Date,CH15,CH16,CH17,CH18";
				Graph6 ="Date,CH19,CH20,CH21,CH22";
				//---------------------------------------------------
				for(iROW=0;iROW<rowMAX;iROW++){
					strDATA=ROW[iROW].split(spCH); // split Column
					//---- X Axis -------
					Graph1+='\n'+strDATA[2];
					Graph2+='\n'+strDATA[2];
					Graph3+='\n'+strDATA[2];
					Graph4+='\n'+strDATA[2];
					Graph5+='\n'+strDATA[2];
					Graph6+='\n'+strDATA[2];

					//--------- data ------
					Graph1+= ','+ strDATA[5];
					Graph1+= ','+ strDATA[8];

					Graph2+= ','+ strDATA[9];
					Graph2+= ','+ strDATA[10];
					Graph2+= ','+ strDATA[11];
					Graph2+= ','+ strDATA[12];

					Graph3+= ','+ strDATA[13];
					Graph3+= ','+ strDATA[14];
					Graph3+= ','+ strDATA[15];
					Graph3+= ','+ strDATA[16];
					Graph3+= ','+ strDATA[19];
					Graph3+= ','+ strDATA[20];

					Graph4+= ','+ strDATA[17];
					Graph4+= ','+ strDATA[18];


					Graph5+= ','+ strDATA[21];
					Graph5+= ','+ strDATA[22];
					Graph5+= ','+ strDATA[23];
					Graph5+= ','+ strDATA[24];

					Graph6+= ','+ strDATA[25];
					Graph6+= ','+ strDATA[26];
					Graph6+= ','+ strDATA[27];
					Graph6+= ','+ strDATA[28];
				} // end for
			}else{
				 alert("!การนำเข้าข้อมูลผิดพลาด myDATA");
				return 0;
			} //if (gBuffer.length >0) 

		//Graph1 ="item,CH1,CH2\n1,38,95 2,40,100\n3,42,105 4,44,110\n5,46,115\n6,48,120\n7,50,125 8,52,130\n9,54,135\n10,56,140";
		//alert(Graph1);
		//	alert(Graph3);
		//document.write(Graph1);
			//---debug---
		//	alert("*** endif-01 ");
		    g1=new Dygraph(document.getElementById("graphdiv1"),Graph1,
				{title:'Demo 2 CH',
				ylabel: 'Temperature (F)',
				legend: 'always',
				labelsDivStyles: { 'textAlign': 'right' }, valueRange: [0, 3000]	}	
			);
			
			g2=new Dygraph(document.getElementById("graphdiv2"),Graph2,
				{title:'Demo 4CH',
				ylabel: 'Temperature (F)',
				legend: 'always',
				labelsDivStyles: { 'textAlign': 'right' }, valueRange: [0, 3000]	}	
			);
			g3=new Dygraph(document.getElementById("graphdiv3"),Graph3,
				{title:'Demo 6CH',
				ylabel: 'Temperature (F)',
				legend: 'always',
				labelsDivStyles: { 'textAlign': 'right' }, valueRange: [0, 3000]	}	
			);
			g4=new Dygraph(document.getElementById("graphdiv4"),Graph4,
				{title:'Demo 2CH',
				ylabel: 'Temperature (F)',
				legend: 'always',
				labelsDivStyles: { 'textAlign': 'right' }, valueRange: [0, 3000]	}	
			);
			g5=new Dygraph(document.getElementById("graphdiv5"),Graph5,
				{title:'Demo 4CH',
				ylabel: 'Temperature (F)',
				legend: 'always',
				labelsDivStyles: { 'textAlign': 'right' }, valueRange: [0, 3000]	}	
			);
			g6=new Dygraph(document.getElementById("graphdiv6"),Graph6,
				{title:'Demo 4CH',
				ylabel: 'Temperature (F)',
				legend: 'always',
				labelsDivStyles: { 'textAlign': 'right' }, valueRange: [0, 3000]	}	
			);
		return 0;
		}   
	}
	xmlhttp.open("GET","getdata_nobuff.php",true);
	xmlhttp.send();
	
}
</script>

</head>



<body>

<p>Display - &gt; Realtime</p>
<p align="center"><a href="mainmenu.php">Back</a></p>
<table width="809" border="0">
  <tr>
    <td>Select a set of responses for monitoring </td>
    <td>Time Unit</td>
    <td>Response</td>
  </tr>
  <tr>
    <td width="436"><select name="set_responses" id="set_responses">
      <option selected="selected">Temp and Displacement</option>
      <option>...</option>
      <option>...</option>
      <option>...</option>
    </select></td>
    <td width="173"><select name="within" id="within">
      <option selected="selected">1 Min</option>
      <option>1 Hour</option>
</select></td>
    <td width="200"><select name="response" id="response">
      <option selected="selected">Value</option>
      <option>Level</option>
    </select></td>
  </tr>
</table>
<!--   Real-Time   -->
<script >
	var myVar=setInterval(function(){getSOCK()},1000);
  </script>
<table width="100" border="0">
  <tr>
    <td>Graph1
<div id="graphdiv1" style="width: 450px; height: 200px;"></div></td>
    <td>Graph2
<div id="graphdiv2" style="width: 450px; height: 200px;"></div></td>
  </tr>
  <tr>
    <td>Graph3
<div id="graphdiv3" style="width: 450px; height: 200px;"></div></td>
    <td>Graph4
<div id="graphdiv4" style="width: 450px; height: 200px;"></div></td>
  </tr>
  <tr>
    <td>Graph5
<div id="graphdiv5" style="width: 450px; height: 200px;"></div></td>
    <td>Graph6
<div id="graphdiv6" style="width: 450px; height: 200px;"></div></td>
  </tr>
</table>

 <div id="div_g" style="width:600px; height:300px;"></div>



</body>
</html>
